{% extends "lxoa/layout.html" %}
{% block css %}

{% endblock %}
{% block content %}
<link rel="stylesheet" type="text/css" href="/static/lxoa/css/bootstrap-table.min.css" />
<style>
    .input-group {
        width: 100%;
    }

    .input-group-addon {
        width: 120px;
    }

    .selectpicker {
        width: 100%;
        /*height: 34px;*/
    }
</style>

<div class="panel-body" style="margin-top:8px;">
    <!-- Table -->
    <table id="table"></table>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">添加报销记录</h4>
                    <button type="button" class="close" onclick="cancelfun()">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="myAlert" class="alert alert-success hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>提交成功！</strong>
                    </div>

                    <div id="myAlerterror" class="alert alert-warning hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>提交失败，请稍后重试！</strong>
                    </div>

                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">报销类型</span>
                                    <select class="selectpicker" name="expense_typeb" id="expense_typeb" data-style="btn-info">
                                        <option value="出差报销">出差报销</option>
                                        <option value="行政报销">行政报销</option>
                                        <option value="采购报销">采购报销</option>
                                        <option value="商务报销">商务报销</option>
                                        <option value="其他报销">其他报销</option>
                                    </select>
                                </div>
                            </div>
                            <!--<div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">confirm person</span>
                                    <select class="selectpicker" name="vac_person2" id="vac_person2" data-style="btn-info">
                                        <option value="Mime Li">Mime Li</option>
                                        <option value="David Tang">David Tang</option>
                                        <option value="Daisy Zhu">Daisy Zhu</option>
                                        <option value="Kyle Bie">Kyle Bie</option>
                                        <option value="Cherry Wu">Cherry Wu</option>
                                        <option value="Alison Zhang">Alison Zhang</option>
                                    </select>
                                </div>
                            </div>-->

                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">审批人</span>
                                    <select class="selectpicker" id="expense_Approver" name="vac_type" data-style="btn-info">
                                        <option value="kun.li@lixiaotech.com">李琨</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="row">

                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">金额(元)</span>
                                    <input type="text" id="txt_total" class="form-control" name="vac_enddate" placeholder="明细金额合计" readonly="readonly" aria-describedby="basic-addon1">
                                </div>
                            </div>

                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">申请日期</span>
                                    <input type="text" id="txt_date" name="vac_date" class="form-control" placeholder="请选择" aria-describedby="basic-addon1">
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-md-12 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">备注</span>
                                    <textarea class="form-control" style="resize:none;" name="expense_remark" id="expense_remark" placeholder="如出差报销，请写明出差地点以及往返时间" aria-describedby="basic-addon1"></textarea>
                                </div>
                            </div>
                        </div>
                        <!--<div class="row" style="margin-top:10px;">
                            <div class="col-md-2 col-md-offset-10 margin-top-8">
                                <button class="btn btn-primary pull-right" id="submitbtn">Submit</button>
                            </div>
                        </div>-->
                    </div>


                    <div class="modal-header" style="margin-top:10px;justify-content:unset;padding-left:0px;">
                        <h4 class="modal-title" id="myModalLabel">报销明细</h4>&nbsp;&nbsp;
                        <button type="button" onclick="addrow(this)" class="close" style="color:green;cursor:pointer;outline:none;">+</button>
                        <!--<button class="btn btn-primary" type="button" onclick="addrow()" name="toggle" aria-label="toggle" title=""> 添加 </button>-->
                        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <style>
                                .fixed-table-container thead th {
                                    border-bottom: 1px solid #ddd;
                                }

                                .table {
                                    margin-bottom: 0 !important;
                                    border-bottom: 1px solid #ddd !important;
                                    border-collapse: collapse !important;
                                    border-radius: 1px !important;
                                }
                            </style>
                            <div class="fixed-table-container" style="padding-bottom: 0px;width:97%;margin-left:9px;">
                                <div class="fixed-table-header" style="display: none;">
                                    <table></table>
                                </div>
                                <div class="fixed-table-body">
                                    <div class="fixed-table-loading" style="top: 41px;">
                                        Loading, please wait...
                                    </div>
                                    <table id="table" class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th style="" data-field="vac_person">
                                                    <div class="th-inner">
                                                        类别
                                                    </div>
                                                    <div class="fht-cell"></div>
                                                </th>
                                                <th style="" data-field="vac_type">
                                                    <div class="th-inner">
                                                        金额
                                                    </div>
                                                    <div class="fht-cell"></div>
                                                </th>
                                                <th style="" data-field="vac_interval">
                                                    <div class="th-inner">
                                                        说明
                                                    </div>
                                                    <div class="fht-cell"></div>
                                                </th>
                                                <th style="" data-field="vac_interval">
                                                    <div class="th-inner">
                                                        操作
                                                    </div>
                                                    <div class="fht-cell"></div>
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody id="expense_items">
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                        </div>

                        <div class="row" id="divcommons" style="margin-top:8px;display:none;">
                            <div class="col-md-12 margin-top-8" style="padding: 0px;padding-left: 9px;padding-right: 12px;">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">审批意见</span>
                                    <input type="text" id="txt_commons" readonly="readonly" style="border:0px;" class="form-control" name="txt_commons" placeholder="" aria-describedby="basic-addon1">
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="modal-footer" style="border:0px;">
                    <button type="button" class="btn btn-default" onclick="cancelfun()"> 取消 </button>
                    <button type="button" class="btn btn-primary" id="submitbtn"> 提交 </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModaldel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">删除选中记录</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                </div>
                <div class="modal-body">
                    <div id="myAlert" class="alert alert-success hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>删除成功！</strong>
                    </div>

                    <div id="myAlerterror" class="alert alert-warning hidden" style="">
                        <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                        <strong>删除失败，请稍后重试！</strong>
                    </div>

                    <div class="panel-body">
                        <div class="row">
                            <h5>您确定要删除此信息吗 ？</h5>
                        </div>

                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                    <button type="button" class="btn btn-primary" id="delbtn" onclick="deluser()"> 确定 </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <div class="modal fade" id="myModalprint" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">报销打印</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <!--startprint-->
                    <div class="panel-body">
                        <style>
                            .input-group div {
                                padding-left: 10px;
                                padding-top: 8px;
                            }

                            .tableprint {
                                width: 100%;
                                margin-left:9px;
                            }

                            .printtd1 {
                                width: 15%;
                            }

                            .printtd2 {
                                width: 35%;
                            }
                            .fixed-table-container thead th {
                                border-bottom: 1px solid #ddd;
                            }

                            .table {
                                margin-bottom: 0 !important;
                                border-bottom: 1px solid #ddd !important;
                                border-collapse: collapse !important;
                                border-radius: 1px !important;
                            }

                            .input-group-addon2 {
                                background-color: #fff;
                                border: 0px;
                            }
                        </style>
                        <div class="row" style="text-align: center;display: block;margin-bottom: 20px;">
                            <h2 class="" id="">费用报销单</h2>
                        </div>
                        <div class="row">
                            <table class="tableprint">
                                <tr>
                                    <td class="printtd1"><span class="input-group-addon2" id="">报销类型</span></td>
                                    <td class="printtd2">
                                        <div id="divtype">
                                        </div>
                                    </td>
                                    <td class="printtd1"><span class="input-group-addon2" id="">审批人</span></td>
                                    <td>
                                        <div id="divapprover">

                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="row">
                            <table class="tableprint">
                                <tr>
                                    <td class="printtd1"><span class="input-group-addon2" id="">金额(元)</span></td>
                                    <td class="printtd2">
                                        <div id="divtotal">
                                        </div>
                                    </td>
                                    <td class="printtd1"><span class="input-group-addon2" id="">审批日期</span></td>
                                    <td>
                                        <div id="divdate">

                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <!--<div class="col-md-6 margin-top-8">
            <div class="input-group">
                <span class="input-group-addon" id="">金额(元)</span>
                <div id="divtotal">
                </div>
            </div>
        </div>

        <div class="col-md-6 margin-top-8">
            <div class="input-group">
                <span class="input-group-addon" id="">审批日期</span>
                <div id="divdate">
                </div>
            </div>
        </div>-->

                        </div>

                        <div class="row">
                            <table class="tableprint">
                                <tr>
                                    <td class="printtd1"><span class="input-group-addon2" id="">备注</span></td>
                                    <td>
                                        <div id="divremark">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <!--<div class="col-md-12 margin-top-8">
            <div class="input-group">
                <span class="input-group-addon" id="">备注</span>
                <div id="divremark">
                </div>
            </div>
        </div>-->
                        </div>
                        <!--<div class="row" style="margin-top:10px;">
        <div class="col-md-2 col-md-offset-10 margin-top-8">
            <button class="btn btn-primary pull-right" id="submitbtn">Submit</button>
        </div>
    </div>-->
                    </div>


                    <div class="modal-header" style="margin-top:10px;padding-left:0px;">
                        <h4 class="modal-title" id="myModalLabel">报销明细</h4>
                        <!--<button class="btn btn-primary" type="button" onclick="addrow()" name="toggle" aria-label="toggle" title=""> 添加 </button>-->
                        <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>-->
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="fixed-table-container" style="padding-bottom: 0px;width:97%;margin-left:9px;">
                                <div class="fixed-table-header" style="display: none;">
                                    <table></table>
                                </div>
                                <div class="fixed-table-body">
                                    
                                    <table id="table" class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th style="" data-field="vac_person">
                                                    <div class="th-inner">
                                                        类别
                                                    </div>
                                                    <div class="fht-cell"></div>
                                                </th>
                                                <th style="" data-field="vac_type">
                                                    <div class="th-inner">
                                                        金额
                                                    </div>
                                                    <div class="fht-cell"></div>
                                                </th>
                                                <th style="" data-field="vac_interval">
                                                    <div class="th-inner">
                                                        说明
                                                    </div>
                                                    <div class="fht-cell"></div>
                                                </th>
                                                <!--<th style="" data-field="vac_interval">
                                <div class="th-inner">
                                    操作
                                </div>
                                <div class="fht-cell"></div>
                            </th>-->
                                            </tr>
                                        </thead>
                                        <tbody id="expense_itemsprint">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="margin-top:10px;">

                            <table class="tableprint">
                                <tr>
                                    <td class="printtd1"><span class="input-group-addon2" id="">财务签字：</span></td>
                                    <td class="printtd2">
                                        
                                    </td>
                                    <td class="printtd1" style="width:20%;"><span class="input-group-addon2" id="">领款人签字：</span></td>
                                    <td>
                                    </td>
                                </tr>
                            </table>

                            <!--<div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">财务签字:</span>

                                </div>
                            </div>

                            <div class="col-md-6 margin-top-8">
                                <div class="input-group">
                                    <span class="input-group-addon" id="">领款人签字:</span>

                                </div>
                            </div>-->
                        </div>

                        <!--endprint-->
                        <div class="modal-footer" style="border:0px;">
                            <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                            <button type="button" class="btn btn-primary" onclick="printexpense()" id="submitbtn"> 打印 </button>
                        </div>
                    </div>


                </div>
        </div>
    </div>
</div>


</div>
{% endblock %}

{% block scripts %}
<script src="/static/lxoa/js/bootstrap.min.js"></script>
<script src="/static/lxoa/js/bootstrap-table.min.js"></script>
<!--<script src="/static/lxoa/js/bootstrap-table-locale-all.min.js"></script>-->

<script src="/static/lxoa/laydate/laydate.js"></script>
<script src="/static/lxoa/js/tableexpense.js"></script>
<script src="/static/lxoa/js/echarts.min.js"></script>

{% endblock %}
